import React, { useEffect, useRef } from 'react';
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts/core';
import {
  LineChart
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer
]);


function LineCharts(props) {
  let xAxisData = props.value.xAxisData
  let seriesData = props.value.seriesData
  let chartTitle = props.value.chartTitle || ''
  const LineChartRef = useRef(null);
  const getOption = () => ({
    title: {
      text: chartTitle
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: seriesData,
      type: 'line'
    }]
  });
  useEffect(() => {
    // 初始化图表
    LineChartRef.current.getEchartsInstance().setOption(getOption());
    return () => {
      // 销毁图表
    //   LineChartRef.current.getEchartsInstance().dispose();
    };
  }, []);
  return (
    <>
      <ReactEcharts
        ref={LineChartRef}
        style={{ height: '100%', width: '100%' }}
        option={getOption()}
        notMerge={true}
        lazyUpdate={true}
      />
    </>
  );
}

export default LineCharts
